<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 1000px;
            /* background: red; */
            margin: 0 auto;
        }
        .container img{
            float: left;
            width: 320px;
            height: 350px;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="" alt="" data-src="./images/1.jpeg">
        <img src="" alt="" data-src="./images/2.jpeg">
        <img src="" alt="" data-src="./images/3.jpeg">
        <img src="" alt="" data-src="./images/4.jpeg">
        <img src="" alt="" data-src="./images/5.jpeg">
        <img src="" alt="" data-src="./images/6.jpeg">
        <img src="" alt="" data-src="./images/7.jpeg">
        <img src="" alt="" data-src="./images/8.jpeg">
        <img src="" alt="" data-src="./images/9.jpeg">
        <img src="" alt="" data-src="./images/10.jpeg">
        <img src="" alt="" data-src="./images/11.jpeg">
        <img src="" alt="" data-src="./images/12.jpeg">
        <img src="" alt="" data-src="./images/13.jpeg">
        <img src="" alt="" data-src="./images/14.jpeg">
        <img src="" alt="" data-src="./images/15.jpeg">
        <img src="" alt="" data-src="./images/16.jpeg">
        <img src="" alt="" data-src="./images/17.jpeg">
        <img src="" alt="" data-src="./images/18.jpeg">
        <img src="" alt="" data-src="./images/19.jpeg">
        <img src="" alt="" data-src="./images/20.jpeg">
        <img src="" alt="" data-src="./images/21.jpeg">
        <img src="" alt="" data-src="./images/22.jpeg">
        <img src="" alt="" data-src="./images/23.jpeg">
        <img src="" alt="" data-src="./images/24.jpeg">
        <img src="" alt="" data-src="./images/25.jpeg">
        <img src="" alt="" data-src="./images/26.jpeg">
        <img src="" alt="" data-src="./images/27.jpeg">
        <img src="" alt="" data-src="./images/28.jpeg">
        <img src="" alt="" data-src="./images/29.jpeg">
        <img src="" alt="" data-src="./images/30.jpeg">
    </div>
    <script src="./lazy.js"></script>
    <script>
        var defaultUrl = './images/default.gif';
        lazyImages(defaultUrl);
    </script>
</body>
</html>